<template>
  <view class="order-list">
    <!-- 顶部标题 -->
    <view class="page-header">
      <text class="page-title">我的订单</text>
    </view>
    
    <!-- 订单状态标签页 -->
    <view class="order-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index" 
        class="tab-item" 
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <text>{{ tab }}</text>
      </view>
    </view>
    
    <!-- 订单列表 -->
    <scroll-view scroll-y class="order-scroll" refresher-enabled @refresherrefresh="refreshOrders" :refresher-triggered="refreshing">
      <view class="order-container">
        <view 
          v-for="(order, index) in filteredOrders" 
          :key="index" 
          class="order-item"
          @click="goToOrderDetail(order)"
        >
          <!-- 订单服务名称 -->
          <view class="order-title">
            <text class="service-name">{{ order.serviceName }}</text>
            <text class="order-status" :class="order.statusClass">{{ order.statusText }}</text>
          </view>
          
          <!-- 订单服务时间和地址 -->
          <view class="order-info">
            <view class="info-item">
              <text class="info-label">预约时间：</text>
              <text class="info-value">{{ order.serviceTime }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">服务地址：</text>
              <text class="info-value">{{ order.address }}</text>
            </view>
          </view>
          
          <!-- 服务人员信息 -->
          <view class="staff-info">
            <image class="staff-avatar" :src="order.staffAvatar" mode="aspectFill"></image>
            <text class="staff-name">{{ order.staffName }}</text>
          </view>
          
          <!-- 订单价格 -->
          <view class="order-price">
            <text class="price">¥{{ order.price }}</text>
          </view>
        </view>
        
        <!-- 无订单提示 -->
        <view v-if="filteredOrders.length === 0" class="empty-tip">
          <image class="empty-image" src="/static/images/empty_order.png" mode="aspectFit"></image>
          <text class="empty-text">暂无订单</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 标签页数据
const tabs = ['全部', '待服务', '进行中', '已完成'];
const currentTab = ref(0);

// 是否正在刷新
const refreshing = ref(false);

// 订单数据
const orders = ref([
  {
    id: '1',
    serviceName: '新居入住全屋深度清洁',
    serviceTime: '2023-06-20 13:00-17:00',
    address: '北京市朝阳区建国路88号',
    staffName: '王阿姨',
    staffAvatar: '/static/images/staff1.jpg',
    price: '638',
    status: 'pending', // 待服务
    statusText: '待服务',
    statusClass: 'status-pending'
  },
  {
    id: '2',
    serviceName: '厨房油烟机深度清洗',
    serviceTime: '2023-06-10 10:00-12:00',
    address: '北京市朝阳区建国路88号',
    staffName: '李师傅',
    staffAvatar: '/static/images/staff2.jpg',
    price: '198',
    status: 'completed', // 已完成
    statusText: '已完成',
    statusClass: 'status-completed'
  },
  {
    id: '3',
    serviceName: '日常保洁服务',
    serviceTime: '2023-06-05 14:00-16:00',
    address: '北京市朝阳区建国路88号',
    staffName: '刘阿姨',
    staffAvatar: '/static/images/staff3.jpg',
    price: '160',
    status: 'completed', // 已完成
    statusText: '已完成',
    statusClass: 'status-completed'
  },
  {
    id: '4',
    serviceName: '窗帘清洗服务',
    serviceTime: '2023-05-25 09:00-11:00',
    address: '北京市朝阳区建国路88号',
    staffName: '赵阿姨',
    staffAvatar: '/static/images/staff4.jpg',
    price: '220',
    status: 'cancelled', // 已取消
    statusText: '已取消',
    statusClass: 'status-cancelled'
  }
]);

// 根据当前标签过滤订单
const filteredOrders = computed(() => {
  if (currentTab.value === 0) {
    return orders.value;
  } else if (currentTab.value === 1) {
    return orders.value.filter(order => order.status === 'pending');
  } else if (currentTab.value === 2) {
    return orders.value.filter(order => order.status === 'in_progress');
  } else if (currentTab.value === 3) {
    return orders.value.filter(order => order.status === 'completed');
  }
  return [];
});

// 切换标签
const switchTab = (index) => {
  currentTab.value = index;
};

// 刷新订单列表
const refreshOrders = () => {
  refreshing.value = true;
  
  // 模拟请求数据
  setTimeout(() => {
    // 实际项目中应该调用API获取最新订单数据
    refreshing.value = false;
  }, 1000);
};

// 跳转到订单详情
const goToOrderDetail = (order) => {
  uni.navigateTo({
    url: `/pages/order/detail?id=${order.id}`
  });
};

onMounted(() => {
  // 页面加载时获取订单数据
  loadOrders();
});

// 加载订单数据
const loadOrders = () => {
  // 实际项目中应该调用API获取订单数据
  uni.showLoading({
    title: '加载中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    // 这里使用的是预设的数据
  }, 500);
};
</script>

<style lang="scss" scoped>
.order-list {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

// 顶部标题
.page-header {
  padding: 30rpx;
  background-color: #fff;
  
  .page-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }
}

// 订单状态标签页
.order-tabs {
  display: flex;
  background-color: #fff;
  padding: 0 20rpx;
  border-bottom: 1px solid #f0f0f0;
  
  .tab-item {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #ff7a45;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background-color: #ff7a45;
        border-radius: 2rpx;
      }
    }
  }
}

// 订单滚动区域
.order-scroll {
  flex: 1;
}

// 订单容器
.order-container {
  padding: 20rpx;
}

// 订单项
.order-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .order-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .service-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .order-status {
      font-size: 26rpx;
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
      
      &.status-pending {
        background-color: #fff8e6;
        color: #ff9500;
      }
      
      &.status-in_progress {
        background-color: #e6f7ff;
        color: #2196f3;
      }
      
      &.status-completed {
        background-color: #e6fff0;
        color: #00c853;
      }
      
      &.status-cancelled {
        background-color: #ffe6e6;
        color: #f44336;
      }
    }
  }
  
  .order-info {
    margin-bottom: 20rpx;
    
    .info-item {
      display: flex;
      margin-bottom: 10rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .info-label {
        font-size: 26rpx;
        color: #999;
      }
      
      .info-value {
        font-size: 26rpx;
        color: #333;
      }
    }
  }
  
  .staff-info {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .staff-avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 30rpx;
      margin-right: 15rpx;
    }
    
    .staff-name {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  .order-price {
    text-align: right;
    
    .price {
      font-size: 36rpx;
      font-weight: bold;
      color: #ff7a45;
    }
  }
}

// 无订单提示
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>